<!--20210304    zaq    创建vue文件,添加子模块-->
<!--20210511    zaq    设计界面-->
<!--20210525    zaq    完成分组（除了删除）调试-->


<template>
<!--说说主页-->
  <div>
<!--    <select-text-default></select-text-default>-->
<!--    查询当天消息-->

    <div class="select-text" style="text-align: left">
      <div>
        <el-dialog title="提示"
                   v-model="insertGroupVisible"
                   width="30%">
          <insert-text-group></insert-text-group>
        </el-dialog>
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item>
            <el-button @click="insertGroupVisible=true">新增分组</el-button>
          </el-form-item>

          <el-form-item>
            <el-button @click="getTextGroup">刷新分组</el-button>
          </el-form-item>

          <el-form-item label="选择分组：">
            <el-select v-model="myGroup" placeholder="请选择" >
              <el-option
                  v-for="item in groups"
                  :key="{gId:item.gId,tgId:item.tgId,gName:item.gName}"
                  :label="item.gName"
                  :value="{gId:item.gId,tgId:item.tgId,gName:item.gName}">
                <span style="float: left">{{item.gName}}</span>&#12288;&#12288;
                <span style="color: #72767b;float: right;font-size: 13px">{{item.gText}}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="deleteGroup">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="showUpdate">修改分组信息</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="getTextDefault">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-dialog title="有话要说" v-model="insertTextVisible">
              <el-form v-model="insertText" style="width: 100%;">
                <el-form-item label="分组:">
                  <el-select v-model="insertText.insertGroup"
                             @change="setGroupId($event)"
                             placeholder="请选择">
                    <el-option
                        v-for="item in groups"
                        :key="item.tgId"
                        :label="item.gName"
                        :value="{tgId:item.tgId,gId:item.gId}">
                      <span style="float: left">{{item.gName}}</span>&#12288;&#12288;
                      <span style="color: #72767b;float: right;font-size: 13px">{{item.gText}}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="insertText.insertGroup.tgId==1">
                  <insert-text-default ></insert-text-default>
                </el-form-item>
                <el-form-item v-else>
                  <insert-text-body></insert-text-body>
                </el-form-item>
              </el-form>



            </el-dialog>
            <el-button @click="insertTextVisible=true">有话要说</el-button>
          </el-form-item>
        </el-form>

<!--        修改身体数据类型信息-->
        <el-dialog title="修改说说" v-model="updateBodyTextVisible">
          <el-form ref="form" :model="myBodyText" style="width: 80%">
            <el-form-item  label="身高(cm)：">
              <el-input
                  type="number"
                  v-model="myBodyText.height">
              </el-input>
            </el-form-item>
            <el-form-item  label="体重(kg)：">
              <el-input
                  type="number"
                  v-model="myBodyText.weight">
              </el-input>

            </el-form-item>
            <el-form-item label="胸围(cm)：">
              <el-input
                  type="number"
                  v-model="myBodyText.bust">
              </el-input>

            </el-form-item>
            <el-form-item label="腰围(cm)：">
              <el-input
                  type="number"
                  v-model="myBodyText.waist">
              </el-input>

            </el-form-item>
            <el-form-item  label="臀围(cm)：">
              <el-input
                  type="number"
                  v-model="myBodyText.hipline">
              </el-input>

            </el-form-item>
            <el-form-item>
              <el-button @click="updateSubmit(myBodyText)">修改</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <el-dialog title="修改分组" v-model="updateGroupVisible">
          <el-form ref="form" :model="myGroup" label-width="80px">
            <el-form-item label="模板:">
              <el-select v-model="myGroup.tgId" placeholder="请选择">
                <el-option
                    v-for="item in kindTextGroups"
                    :key="item.tgId"
                    :label="item.tgName"
                    :value="item.tgId"
                    disabled="true">
                  <span style="float: left">{{item.tgName}}</span>&#12288;&#12288;
                  <span style="color: #72767b;float: right;font-size: 13px">{{item.tgText}}</span>
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item label="名称:">
              <el-input
                  type="text"
                  placeholder="请输入内容"
                  v-model="myGroup.gName"
                  maxlength="20"
                  show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="myGroup.gText"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="submit">修改</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

      </div>

      <el-dialog title="说说详情" v-model="selectListVisible" v-if="DestroyIncomeStatistics==true">
        <select-text-default v-bind:fList="fList" ></select-text-default>
      </el-dialog>
      <el-badge is-dot class="mark"
                style="width: 80%"
                v-if="myGroup.tgId==1"
                v-for="list in textLists"
                :hidden="isHidden(list.tFlag)"
      >

        <el-button style="width: 100%;padding: 0;margin: 0.1em;text-align: left;height: 5em"
                   @click="selectList(list)"
                   type="info"
        >
          <span style="width:80%;display:block;padding: 1em;
          word-break:keep-all;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          -o-text-overflow:ellipsis;">{{list.tText}}</span>
          <footer style="text-align:right;padding-right: 5px">
            {{list.tDate}}&#12288;{{timeFormat(list.tTime)}}
          </footer>
        </el-button>
      </el-badge>
      <el-table
          v-if="myGroup.tgId==2"
          :data="bodyLists"
          style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-form-item label="身高（cm）:">
                <span>{{ props.row.height }}</span>
              </el-form-item>
              <el-form-item label="体重（kg）:">
                <span>{{  props.row.weight }}</span>
              </el-form-item>
              <el-form-item label="胸围（cm）:">
                <span>{{ props.row.bust }}</span>
              </el-form-item>
              <el-form-item label="腰围（cm）:">
                <span>{{ props.row.waist }}</span>
              </el-form-item>
              <el-form-item label="臀围（cm）:">
                <span>{{ props.row.hipline }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="日期"
            prop="date">
        </el-table-column>
        <el-table-column
            label="类型"
        >身体数据
        </el-table-column>
        <el-table-column
            label="操作">
          <template #default="props">
            <el-button @click="updateBodyText(props.row)">修改</el-button>
            <el-button @click="deleteRecordBody(props.row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>


<!--    &lt;!&ndash;分页&ndash;&gt;-->
<!--    <footer>-->
<!--      <div class="block">-->
<!--        <el-pagination-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--            :current-page="currentPage"-->

<!--            :page-sizes="[100, 200, 300, 400]"-->
<!--            :page-size="100"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            :total="400">-->
<!--        </el-pagination>-->
<!--      </div>-->
<!--    </footer>-->


  </div>


</template>

<script>
import moment from "moment"
import insert_text_default from "./Insert_text_default";
import insert_text_body from "./Insert_text_body";
import insert_text_group from "./Instert_text_group";
import select_text_default from "./Select_text_default";
import {delete_16131, getKindTextGroup_0000, getTextDefault_0000, getTextGroup_0000, update_16121} from "../../api";
import {getTextBody_0000,update_16621,delete_16631} from "../../api";

export default {
  name: "Texts",
  props:{
    flag:'',//查询范围1|当天；2|全部
  },
  components:{
    'select-text-default':select_text_default,//查询模块
    'insert-text-group':insert_text_group,//新增分组
    'insert-text-default':insert_text_default,//新增模块
    'insert-text-body':insert_text_body,//新增模块
  },
  data(){
    return{
      myBodyText:null,
      updateBodyTextVisible:false,
      DestroyIncomeStatistics:false,
      insertText:{
        insertGroup: {tgId:null,gId:null},
      },
      selectListVisible:false,
      fList:null,
      insertTextVisible:false,
      updateGroupVisible:false,
      kindTextGroups:null,
      myGroup: {
        tgId:-1,
        tgName:null,
        gId:null,
      },
      group:{
        code: null,
        delete: false,
        gBeginTime: 20210525,
        gDefault: false,
        gEndTime: 20210525,
        gId: 1,
        gName: "a",
        gText: null,
        note: null,
        tgId: 1,
        uId: 2,
      },
      groups:null,
      insertGroupVisible:false,
      isHidden:function (flag) {
        // console.log("flag="+flag)
        if (flag!=0)
          return false;
        else return true;
      },
      textLists:null,
      bodyLists:null,
        // {
        //   tId:'1',
        //   tDate:'20210511',
        //   tTime:'8:00',
        //   tText:'111',//内容
        //   tFId:'',//父对象ID
        //   tFGid:'',//父对象分组ID
        //   tFlag:'1',//评论数
        //   gId:'',//分组
        //   uId:'',//用户ID
        //   delete:'0',
        //   select:false
        // },
        // {
        //   tId:'2',
        //   tDate:'20210511',
        //   tTime:'8:00',
        //   tText:'222',//内容
        //   tFId:'',//父对象ID
        //   tFGid:'',//父对象分组ID
        //   tFlag:'1',//评论数
        //   gId:'',//分组
        //   uId:'',//用户ID
        //   delete:'0',
        // },
        // {
        //   tId:'3',
        //   tDate:'20210511',
        //   tTime:'8:00',
        //   tText:'333',//内容
        //   tFId:'',//父对象ID
        //   tFGid:'',//父对象分组ID
        //   tFlag:'0',//评论数
        //   gId:'',//分组
        //   uId:'',//用户ID
        //   delete:'0',
        // },
      // ],
      currentPage:4,

    }
  },
  methods: {
    deleteGroup(){
      const _this=this
      console.log(_this.myGroup)
      var form=_this.myGroup
      this.$confirm('此操作将永久删除'+form.gName+'分组以及分组内的说说, 是否继续?', '删除分组', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let body={
          uId:sessionStorage.getItem('uId'),
          tgId:form.tgId,
          gId:form.gId
        }
        delete_16131(body).then(resp=>{
          if(resp.code>0){
            _this.$message({
              type: 'success',
              message: '删除成功'
            });
            _this.myGroup=null
            _this.getTextGroup()
          }else {
            _this.$message({
              type: 'error',
              message: '删除失败：' + resp.note
            });
          }
        }).catch(err=>{
          _this.$message({
            type: 'error',
            message: '删除失败：' + err
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteRecordBody(body){
      const _this=this
      this.$confirm('此操作将永久删除该说说, 是否继续?', '删除账簿', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delete_16631(body).then(resp=>{
          if(resp.code>0){
            _this.$message({
              type: 'success',
              message: '删除说说成功'
            });
            _this.getTextBody()
          }else {
            _this.$message({
              type: 'error',
              message: '删除说说失败：' + resp.note
            });
          }
        }).catch(err=>{
          _this.$message({
            type: 'error',
            message: '删除说说失败：' + err
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    updateSubmit(body){
      const _this=this
      update_16621(body).then(resp=>{
        if(resp.code>0){
          _this.$message({
            type: 'success',
            message: '修改说说成功'
          });
          _this.updateBodyTextVisible=false
        }else{
          _this.$message({
            type: 'error',
            message: '修改说说失败：'+resp.note
          });
        }
      }).catch(err=>{
        _this.$message({
          type: 'error',
          message: '修改说说失败：'+err
        });
      })
    },
    updateBodyText(body){
      this.updateBodyTextVisible=true
      this.myBodyText=body
    },
    selectList(list){
      this.DestroyIncomeStatistics=false
      sessionStorage.setItem("tId",list.tId)
      sessionStorage.setItem("gId",list.gId)
      this.fList=list
      this.selectListVisible=true
      this.$nextTick(() => {
        this.DestroyIncomeStatistics=true
      })

    },
    timeFormat:function (body){
      var str=moment(body).format('HH : mm :ss')
      return str
    },
    getTextBody(){
      const _this=this
      var uId=sessionStorage.getItem("uId")
      var gId=_this.myGroup.gId
      if(gId==null){
        this.$message({
          type: 'error',
          message: '请选择一个分组'
        });
      }else {
        var body={
          uId:uId,
          gId:gId,
        }
        getTextBody_0000(body).then(resp=>{
          console.log(resp)
          _this.bodyLists=resp
        }).catch(err=>{
          console.log("err:"+err)
        })
      }

    },
    getTextDefault(){
      const _this=this
      var uId=sessionStorage.getItem("uId")
      var gId=_this.myGroup.gId
      if(_this.myGroup.gId==null){
        this.$message({
          type: 'error',
          message: '请选择一个分组'
        });
      }else {
        if(_this.myGroup.tgId==1){
          var body={
            uId:uId,
            gId:gId,
            tFId:-1,
            tFGid:-1
          }
          getTextDefault_0000(body).then(resp=>{
            console.log(resp)
            _this.textLists=resp
          }).catch(err=>{
            console.log("err:"+err)
          })
        }
        else {
          _this.getTextBody()
        }

      }

    },
    setGroupId(event){
      console.log("groupId="+this.insertText.insertGroup.gId)
      sessionStorage.setItem("gId",this.insertText.insertGroup.gId)
      sessionStorage.setItem("tgId",this.insertText.insertGroup.tgId)
    },
    submit(){
      const _this=this
      var body=_this.myGroup
      //合法性验证
      if(body.tgId==null){
        _this.$message({
          type: 'error',
          message: '分组不能为空'
        });
      }else if(body.gName==null||body.gName.trim()==""){
        _this.$message({
          type: 'error',
          message: '名称不能为空'
        });
      }else {
        console.log(body)
        update_16121(body).then(resp=>{
          if(resp.code>0){
            _this.$message({
              type: 'success',
              message: '修改说说分组成功'
            });
            _this.updateGroupVisible=false
          }else{
            _this.$message({
              type: 'error',
              message: '修改说说分组失败：'+resp.note
            });
          }
        }).catch(err=>{
          _this.$message({
            type: 'error',
            message: '修改说说分组失败：'+err
          });
        })
      }
    },
    showUpdate(){
      if(this.myGroup==null){
        this.$message({
              type: 'error',
              message: '请选择一个分组'
            });
      }else{
        this.updateGroupVisible=true
        this.getKindTextGroup()
      }

    },
    getKindTextGroup(){
      const  _this=this
      getKindTextGroup_0000().then(resp=>{
        console.log(resp)
        _this.kindTextGroups=resp
      }).catch(error=>{
        console.log(error)
      })
    },
    getTextGroup(){
      const _this=this
      var body={
        uId:sessionStorage.getItem("uId")
      }
      getTextGroup_0000(body).then(resp=>{
        console.log(resp)
        this.groups=resp
      }).catch(err=>{
        _this.$message({
          type: 'error',
          message: '获得说说分组失败：'+err
        });
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  created() {
    this.getTextGroup()
  }
}
</script>

<style scoped>

</style>